<!-- 进程管控 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px; margin-bottom: 32px">
      <div style="display:flex;justify-content:space-between;">
        <div>
          <el-button type="primary" icon='el-icon-circle-plus-outline' @click="addClick()">新建报表</el-button>
        </div>
      </div>
      <el-table stripe border :data="tableData" table-id="table1" row-key="RuleName"
        style="width: 100%; margin-top: 15px">
        <el-table-column label="序号" width="60" type="index"
          :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
        <el-table-column prop="TmplName" label="报表模板" width="280" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="TimeRange" width="180" label="时间范围"></el-table-column>
        <el-table-column prop="CreateTime" width="180" label="创建时间"></el-table-column>
        <el-table-column prop="GenerateState" width="130" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.GenerateState === 0 ? '新建' : '已生成' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="FileTime" width="180" label="生成时间"></el-table-column>
        <el-table-column prop="Descp" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" fixed="right" width="180px">
          <template slot-scope="scope">
            <el-button size="mini" type="success" :disabled="scope.row.GenerateState === 0"
              @click="downloadClick(scope.row, scope.$index)">下载</el-button>
            <el-button size="mini" type="danger" :disabled="scope.row.GenerateState === 0"
              @click="deleteClick(tableData, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape=false :title="Action === 1 ? '新增手动报表' : '修改规则'"
      :visible.sync="dialogVisible" v-el-drag-dialog width="1000px">
      <el-form label-width="130px" :model="accountForm" :rules="rules" ref="accountForm">
        <el-row class="ruleMain">
          <el-divider content-position="left">基本规则内容</el-divider>
          <el-col :xs="24" :sm="24" :lg="24">
            <el-form-item label="报表模板：" prop="TmplTag">
              <el-select style="width:100%" value-key="TmplTag" @change='ReportTypeClick' v-model="accountForm.TmplTag">
                <el-option v-for="(item, index) in TempleteList" :key="index" :label="item.Name" :value="item" />
              </el-select>
            </el-form-item>
            <device-object-selector :form.sync="accountForm" />
            <el-form-item label="描述：" prop="Descp">
              <el-input placeholder="请输入描述" type="textarea" :rows="3" maxlength="50"
                v-model="accountForm.Descp"></el-input>
            </el-form-item>
            <el-form-item label="统计条件：">
              <el-col :span="24" style="padding-left:0">
                <el-form-item label="时间范围：" label-width="85px" prop="TimeScope">
                  <el-date-picker :picker-options="pickerOptionsStart" style="width:400px !important;"
                    v-model="accountForm.TimeScope" size="small" @change="timeClick" value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="报表生成：" prop="UploadEmail">
              <el-radio v-model="accountForm.UploadEmail" :label="0">仅生成</el-radio>
              <el-radio v-model="accountForm.UploadEmail" :label="1">生成并发送到指定邮箱</el-radio>
            </el-form-item>
            <el-form-item v-if="accountForm.UploadEmail === 1" label="接收邮箱地址：" prop="emailList">
              <el-input type="textarea" v-model="accountForm.emailList" @change="email" :rows="3" placeholder="请输入接收邮箱地址"
                maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="dialogVisible = false;">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import { connrequest } from '@/api/firstPage'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import DeviceObjectSelector from '@/components/DeviceObjectSelector'
export default {
  directives: { elDragDialog },
  components: {
    DeviceObjectSelector
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      TempleteList: [],
      Action: 0,
      dialogVisible: false,
      accountForm: {},
      pickerOptionsStart: {
        // 时间不能大于当前时间
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        }
      },
      OBJList: '',
      rules: {
        RuleName: [
          { required: true, message: "请输入规则名称" }
        ],
      },
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
    this.GetReportTmplContens()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    ReportTypeClick(val) {
      this.accountForm.TimeScope = '';
      if (val === 'event') {
        this.accountForm.ReportCond = {
          StartTime: '',
          EndTime: '',
          SrcIP: "",
          DstIP: "",
          EventType: [],
          EventLevel: "",
        },
          this.accountForm.ReportContent = []
      } else if (val === 'flow') {
        this.accountForm.ReportCond = {
          StartTime: '',
          EndTime: '',
          IP: '',
          Protocol: ''
        },
          this.accountForm.ReportContent = []
      }
    },
    timeClick(val) {
      if (val === null) {
        val = []
      }
      this.accountForm.ReportCond.StartTime = val[0];
      this.accountForm.ReportCond.EndTime = val[1]
    },
    email(val) {
      this.accountForm.Email = val.split(',');
    },
    async GetReportTmplContens() {
      const res = await connrequest('GetReportTmplContens')
      this.TempleteList = res.Data
    },
    async getData() {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
      }
      const res = await connrequest('GetLogReportList', data);
      if (res.Status.StatusCode === 0) {
        this.tableData = res.Data;
        this.total = res.Paging.TotalCount;
      }
    },
    addClick() {
      this.Action = 1;
      this.$nextTick(() => {
        // 等待组件挂载
        this.accountForm = {
          DeviceObjType: 1,
          UploadEmail: 0
        };
        this.$refs['accountForm'].resetFields();
      });
      this.dialogVisible = true;
    },
    downloadClick(row, index) {

    },
    deleteClick(tableData, index) {
      const data = {
        Header: {
          CmdCode: "DeleteAuditLogReport",
          PageName: "AuditLogReport"
        },
        Data: {
          ID: row.ID
        },
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await connrequest(data);
        if (res.Status.StatusCode === 0) {
          this.getData();
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submit() {
      this.$refs['accountForm'].validate(async (valid) => {
        if (valid) {
          const data = {
            Data: {
              ...this.accountForm,
              TmplTag: this.accountForm?.TmplTag?.TmplTag,
              TmplName: this.accountForm?.TmplTag?.Name,
              ReportCond: {
                StartTime: this.accountForm.TimeScope?.[0],
                EndTime: this.accountForm.TimeScope?.[1],
              }
            },
          }
          const res = await connrequest('GenerateLogReport', data);
          if (res.Status.StatusCode === 0) {
            this.getData();
            this.dialogVisible = false;
            this.$message.success("新增成功");
          }
        }
      })
    },
  }
}
</script>